<!DOCTYPE html>
<html lang="en" class="no-js">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Circular Navigation - Interactive Demo | Codrops</title>
    <meta name="description" content="Circular Navigation Styles - Building a Circular Navigation with CSS Transforms | Codrops " />
    <meta name="keywords" content="css transforms, circular navigation, round navigation, circular menu, tutorial" />
    <meta name="author" content="Sara Soueidan for Codrops" />
    <link rel="shortcut icon" href="../favicon.ico">
    <link rel="stylesheet" type="text/css" href="css/main.css" />
    <script src="js/vendor/modernizr-2.6.2.min.js"></script>
  </head>
  <body>
    <div class="cn-wrapper">
     <ul>
      <li><a href="#"><span class="icon-picture"></span></a></li>
      <li><a href="#" class="active"><span class="icon-headphones"></span></a></li>
      <li><a href="#"><span class="icon-home"></span> </a></li>
      <li><a href="#"><span class="icon-facetime-video"></span></a></li>
      <li><a href="#"><span class="icon-envelope-alt"></span></a></li>
     </ul>
    </div>
    <div class="steps">List items are positioned absolutely. Anchor tags inside them are also positioned absolutely, and their size is given so that they are visible at the end of the transformation. Red dot represents the container's center.</div>
    <button class="play-button">Start Demo</button>
    <button class="step-button">Next Step</button>
    <button class="reset-button" disabled>Reset</button>
    <span><em>*Best experienced in Chrome</em></span>
    <ul class="info">
      <li>List Item</li>
      <li>Nav Container</li>
      <li>Anchor inside List Item</li>
      <li>Container center</li>
    </ul>
    <a class="back" href="http://tympanus.net/codrops/?p=16114"><span>Back to the Codrops Article</span></a>
    <script src="js/vendor/jquery-1.10.1.min.js"></script>
    <script src="js/main.js"></script>
  </body>
</html>